{% extends '_layouts/base.html' %}
{% load i18n thumbnail %}

{% block title %}{% trans 'Search' %}{% endblock %}

{% block body %}
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12">
        {% for error in form.non_field_errors %}
          <div class="alert alert-danger" role="alert">{{ error }}</div>
        {% endfor %}
        <form class="form-inline" action="" method="post">
          {% csrf_token %}

          <div class="form-group">
            <label for="city" class="control-label">{{ form.city.label }}</label>

            {{ form.city }}
          </div>

          <div class="form-group">
            <label for="kind" class="control-label">{{ form.kind.label }}</label>

            {{ form.kind }}
          </div>

          <div class="form-group">
            <label for="status" class="control-label">{{ form.status.label }}</label>

            {{ form.status }}
          </div>

          <div class="form-group">
            <label for="size" class="control-label">{{ form.size.label }}</label>

            {{ form.size }}
          </div>

          <div class="form-group">
            <label for="sex" class="control-label">{{ form.sex.label }}</label>

            {{ form.sex }}
          </div>

          <div class="form-group">
            <input class="btn btn-success" type="submit" value="{% trans 'Search' %}"/>
          </div>
        </form>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <h3>{% trans 'Result' %}</h3>
      </div>
      {% for pet in pets %}
        <div class="col-xs-12 col-sm-6 col-md-3 card-pet">
          {% include '_partials/pet_card.html' with pet=pet only %}
        </div>
      {% empty %}
        <div class="col-md-12">
          <p>{% trans 'No results' %}</p>
        </div>
      {% endfor %}
    </div>
  </div>
{% endblock body %}